<template>
  <div class="user-course-history">
    <el-table :data="historyList" height="450px" border>
      <el-table-column prop="title" label="课程" align="center" />
      <el-table-column prop="courseStatus" label="学习状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.courseStatus === 0" style="color:#909399">未开始</span>
          <span v-if="scope.row.courseStatus === 1" style="color:#409EFF">未完成</span>
          <span v-if="scope.row.courseStatus === 2" style="color:#67C23A">已完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="coursewareStatus" label="课程状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.coursewareStatus === 0" style="color:#909399">未开始</span>
          <span v-if="scope.row.coursewareStatus === 1" style="color:#409EFF">未完成</span>
          <span v-if="scope.row.coursewareStatus === 2" style="color:#67C23A">已完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="examStatus" label="考试状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.examStatus === 0" style="color:#909399">未开始</span>
          <span v-if="scope.row.examStatus === 1" style="color:#409EFF">未完成</span>
          <span v-if="scope.row.examStatus === 2" style="color:#67C23A">已完成</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'userCourseHistory',
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      historyList: [],
      pageIndex: 1,
      pageSize: 999,
      totalCount: 0
    }
  },
  methods: {
    async loadCourseHistoryList () {
      let res = await this.$http({
        url: '/train-admin/courseManage/getCourseHistory',
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: this.pageSize,
          userId: this.userId
        }
      })
      this.historyList = res.data.list
    }
  },
  created () {
    this.loadCourseHistoryList()
  }
}
</script>

<style>

</style>
